<script setup>
import { onShow, onLoad } from '@dcloudio/uni-app'
import { getCurrentInstance } from 'vue'
import { useUserStore } from '@/stores'

const userStore = useUserStore()
const instance = getCurrentInstance()
const { user } = userStore

onLoad(() => {
  instance.proxy.$forceUpdate()
})

onShow(() => {
  instance.proxy.$forceUpdate()
})

// 退出登录
const onLogout = () => {
  uni.showModal({
    content: '是否退出登录？',
    confirmColor: '#27BA9B',
    success: (res) => {
      if (res.confirm) {
        // 清理用户信息
        userStore.clearUser()
        uni.reLaunch({ url: '/pages/login/login' })
      }
    },
  })
}
</script>

<template>
  <view class="my">
    <view class="mt-20 mb-20">
      <uni-list>
        <uni-list-item title="关于" showArrow>
          <template v-slot:body>
            <view class="flex items-center">
              <image src="../../static/test.png" mode="scaleToFill" />
              <view class="ml-40">
                <view class="name">{{ user?.username }}</view>
                <!-- <view class="hint">点击更换头像</view> -->
              </view>
            </view>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
    <uni-list>
      <uni-list-item title="关于" showArrow></uni-list-item>
      <uni-list-item title="版本" showArrow rightText="v1.154.01"></uni-list-item>
    </uni-list>

    <button class="logout-btn" @click="onLogout">退出登录</button>
  </view>
</template>

<style scoped lang="scss">
.my {
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
  image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
  }
  .name {
    font-size: 32rpx;
  }
  .hint {
    color: #d1d1d1;
    font-size: 14px;
  }
  .logout-btn {
    width: calc(100% - 40rpx);
    background-color: #fff;
    position: fixed;
    bottom: 40rpx;
    left: 20rpx;
    right: 20rpx;
  }
}
</style>
